<template>
  <div class="resourcesManagement">
    <div class="mainbox">
      <div class="nav">
        <div>
          <div class="treetitle">资源目录</div>
          <div class="searchbox">
            <el-input
              placeholder="请输入查询内容"
              v-model="nodeKeyword"
              size="small"
            >
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </div>
          <div>
            <el-tree
              ref="refCatalogTree"
              :props="defaultProps"
              :data="catalogTreeData"
              node-key="catalogId"
              default-expand-all
              highlight-current
              :expand-on-click-node="false"
              @node-click="nodeClick"
            >
            </el-tree>
          </div>
        </div>
      </div>
      <div class="main">
        <el-form :inline="true">
          <el-form-item label="资源名称">
            <el-input
              size="small"
              v-model="formData.resourceName"
              placeholder="请输入资源名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="reset" size="small">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search" size="small"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 表格数据 -->
        <el-row>
          <el-table
            :row-key="getRowKeys"
            ref="tableRef"
            :data="tableData"
            v-loading="tableLoading"
            :header-cell-style="{ background: '#FAFAFA', textAlign: 'center' }"
            highlight-current-row
            :cell-style="{ textAlign: 'center' }"
            max-height="450"
            size="small"
            @select-all="selectAll"
            @select="rowSelect"
          >
            <el-table-column type="selection" width="55" :selectable="selected">
            </el-table-column>
            <el-table-column prop="resourceName" label="资源名称">
            </el-table-column>
            <el-table-column prop="resourceDescribe" label="资源描述">
            </el-table-column>
          </el-table>
        </el-row>
        <br />
        <el-row>
          <!-- 分页 -->
          <el-pagination
            background
            align="center"
            @size-change="pageSizeChange"
            @current-change="currentPageChange"
            :current-page="formData.pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="formData.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="formData.total"
          >
          </el-pagination>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['tickTableData'],
  data () {
    return {
      nodeKeyword: '', //树节点搜索关键词
      resourceDialogType: 'new', //资源弹窗类型
      resourceForm: { //资源的新增和编辑
        resourceName: '',
        resourceDescribe: ''
      },
      resourceDialogVisible: false, //资源窗口是否显示
      nodeDialogVisible: false, //是否显示树节点新增/编辑弹窗
      nodeDialogType: 'new', //树节点弹窗类型 ： 新增 / 编辑
      catalogFiles: [], //要上传的目录结构excel
      resourceFiles: [], //要上传的资源列表excel
      treeNode: { //要新增/编辑的树节点
        catalogName: '',
        sort: ''
      },
      selectedTreeNode: {}, //当前选中的树节点
      multipleSelection: [], //被选中的行
      formData: { //查询表单
        resourceName: '',
        pageNum: 1,
        pagesize: 10,
        total: 0
      },
      catalogTreeData: [],
      defaultProps: { //树形节点，属性别名定义
        'label': 'catalogName',
      },
      tableData: [],
      tableLoading: false //表格加载中
    }
  },
  mounted () {
    this.loadCatalogTreeData();
  },
  methods: {
    // 回显禁用  resIdTick==1禁用勾选
    selected (row, index) {
      if (row.resIdTick == 1) {
        return false
      } else {
        return true
      }
    },
    // 选择回显
    getRowKeys (row) {
      return row.resId
    },
    loadCatalogTreeData () { //加载目录树
      this.$http({
        url: '/api/resources/catalog/list'
      }).then(res => {
        this.catalogTreeData = res.data.data;
        this.$nextTick(() => {
          let catalogId = this.catalogTreeData[0].catalogId
          console.log(this.tickTableData)
          if (this.tickTableData.length > 0) {
            catalogId = this.tickTableData[0].parentId || this.tickTableData[0].cataId
          }
          // 把id赋给这个方法就可以
          this.$refs.refCatalogTree.setCurrentKey(catalogId); //选中根节点
          this.selectedTreeNode = catalogId //记录选中节点
          console.log(this.selectedTreeNode)
          this.loadTableData();
        })
      })
    },
    // 目录节点触发
    nodeClick (data) {
      // 判断能不能点击   不能点击把值赋回去
      if (this.tickTableData.length > 0) {
        this.$message.info('只可申请和列表资源同一目录的资源！')
        this.$refs.refCatalogTree.setCurrentKey(this.tickTableData[0].parentId); //选中根节点
        return
      }
      console.log(data)
      this.selectedTreeNode = data;
      this.loadTableData()

    },
    reset () {
      this.formData.resourceName = ''
      this.formData.pageNum = 1
      this.search()
    },
    search () {
      this.loadTableData()
    },
    pageSizeChange (pageSize) {
      this.formData.pagesize = pageSize
      this.loadTableData()
    },
    currentPageChange (pageNum) {
      this.formData.pageNum = pageNum
      this.loadTableData()
    },
    loadTableData () {  //加载资源列表
      this.tableLoading = true;
      this.$http({
        // url: '/api/resources/info/list',
        url: '/api/resources/info/listParentId',
        method: 'POST',
        data: {
          ...this.formData,
          parentId: this.selectedTreeNode.catalogId || this.selectedTreeNode
        }
      }).then(res => {
        this.tableLoading = false;
        this.tableData = res.data.rows;
        this.formData.total = res.data.total;
        // 
        console.log(this.tickTableData)
        console.log(this.tableData)
        this.$nextTick(() => {
          // 循环选中赋值
          for (let i = 0; i < this.tickTableData.length; i++) {
            for (let j = 0; j < this.tableData.length; j++) {
              if (this.tickTableData[i].resId == this.tableData[j].resId) {
                // 给表格数据添加不可勾选的属性
                this.tableData[j].resIdTick = 1
                this.$refs.tableRef.toggleRowSelection(this.tableData[j], true);
              }
            }
          }
        })
      })
    },
    selectAll (list) { //选择所有行
      this.multipleSelection = list;
    },
    rowSelect (list) { //选择某一行
      this.multipleSelection = list;
    },
  },
  watch: {
    nodeKeyword (val) {
      // console.log(val);
      this.$refs.refCatalogTree.filter(val);
    }
  }
}
</script>

<style lang="scss" scoped>
.resourcesManagement {
  // height: calc(100vh - 100px);
  background-color: #f8f8f8;
  padding: 5px 30px 10px;

  .mainbox {
    display: flex;
    height: 92%;

    .nav {
      width: 350px;
      background-color: white;
      margin-right: 10px;
      box-sizing: border-box;
      padding: 20px 10px 10px 10px;
      font-size: 16px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .treetitle {
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 20px;
        text-align: center;
      }
      .searchbox {
        margin: 15px 0;
      }
    }

    .main {
      flex: 1;
      background-color: white;
      overflow-y: auto;
      padding: 30px;
      position: relative;
    }
  }
}
</style>
<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
